<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>添加题目</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="__PUBLIC__/BeginnerAdmin/plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="__PUBLIC__/BeginnerAdmin/plugins/font-awesome/css/font-awesome.min.css">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>添加题目</legend>
</fieldset>
<form class="layui-form " action="" style="width: 90%">
    <input type="hidden" name="examinationid" id="examinationid" value="<{$examinationid}>">

    <div class="layui-form-item">
        <label class="layui-form-label">内置</label>
        <div class="layui-input-block">
            <input type="checkbox" id="neizhi"  lay-filter="neizhi" title="内置到大题">
        </div>
    </div>

    <div id="type6" style="display: none;">
        <div class="layui-form-item">
            <label class="layui-form-label">内置题</label>
            <div class="layui-input-block">
                <select name="LastJobLibraryId" lay-verify="LastJobLibraryId" lay-filter="LastJobLibraryId" id="LastJobLibraryId">
                    <option value=""></option>
                    <foreach name="ret_job_library" item="vo">
                        <option value="<{$vo.id}>"><{$vo.body|htmlspecialchars_decode|strip_tags}></option>
                    </foreach>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">题型</label>
        <div class="layui-input-block">
            <select name="type" lay-verify="type" lay-filter="selectType" id="type">
                <option value=""></option>
                <option value="1">选择题</option>
                <option value="3">填空题</option>
                <option value="4">简答题</option>
                <option value="5">内置小题</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item" id="sequence">
        <label class="layui-form-label">题号</label>
        <div class="layui-input-block">
            <input type="text" name="sequence" lay-verify="sequence" autocomplete="off" placeholder="请输入题号（默认：0）"
                   class="layui-input" value="">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">题目</label>
        <div class="layui-input-block">
            <textarea id="body" name="body" style="display: none;"></textarea>
        </div>
    </div>

    <div id="type1" style="display: none;">
        <div id="answerbody">
            <div class="layui-form-item" id="answerbodya">
                <label class="layui-form-label">答案A</label>
                <div class="layui-input-block">
                    <textarea id="optiona" style="display: none;"></textarea>
                </div>
            </div>
            <div class="layui-form-item" id="answerbodyb">
                <label class="layui-form-label">答案B</label>
                <div class="layui-input-block">
                    <textarea id="optionb" style="display: none;"></textarea>
                </div>
            </div>
            <div class="layui-form-item" id="answerbodyc">
                <label class="layui-form-label">答案C</label>
                <div class="layui-input-block">
                    <textarea id="optionc" style="display: none;"></textarea>
                </div>
            </div>
            <div class="layui-form-item" id="answerbodyd">
                <label class="layui-form-label">答案D</label>
                <div class="layui-input-block">
                    <textarea id="optiond" style="display: none;"></textarea>
                    <br>
                    <div id="show" style="float: right;color: #008855;">
                        <a onclick="optionPro();" class="layui-btn layui-btn-sm layui-btn-radius">更多</a>
                    </div>
                    <div id="hide" style="float: right;color: #008855;display: none;">
                        <a onclick="optionPro();" class="layui-btn layui-btn-sm layui-btn-radius">收起</a>
                    </div>
                </div>
            </div>
            <div id="optionPro" style="display: none;">
                <div class="layui-form-item" id="answerbodye">
                    <label class="layui-form-label">答案E</label>
                    <div class="layui-input-block">
                        <textarea id="optione" style="display: none;"></textarea>
                    </div>
                </div>
                <div class="layui-form-item" id="answerbodyf">
                    <label class="layui-form-label">答案F</label>
                    <div class="layui-input-block">
                        <textarea id="optionf" style="display: none;"></textarea>
                    </div>
                </div>
                <div class="layui-form-item" id="answerbodyg">
                    <label class="layui-form-label">答案G</label>
                    <div class="layui-input-block">
                        <textarea id="optiong" style="display: none;"></textarea>
                    </div>
                </div>
                <div class="layui-form-item" id="answerbodyh">
                    <label class="layui-form-label">答案H</label>
                    <div class="layui-input-block">
                        <textarea id="optionh" style="display: none;"></textarea>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">正确答案</label>
            <div class="layui-input-block" id="answer">
                <input type="checkbox" id="answera" ischeckbox="answer" lay-verify="checkbox" title="A" value="A">
                <input type="checkbox" id="answerb" ischeckbox="answer" lay-verify="checkbox" title="B" value="B">
                <input type="checkbox" id="answerc" ischeckbox="answer" lay-verify="checkbox" title="C" value="C">
                <input type="checkbox" id="answerd" ischeckbox="answer" lay-verify="checkbox" title="D" value="D">
            </div>
        </div>

        <div id="answerPro" class="layui-form-item" style="display: none;">
            <div class="layui-input-block" id="answer">
                <input type="checkbox" id="answere" ischeckbox="answer" lay-verify="checkbox" title="E" value="E">
                <input type="checkbox" id="answerf" ischeckbox="answer" lay-verify="checkbox" title="F" value="F">
                <input type="checkbox" id="answerg" ischeckbox="answer" lay-verify="checkbox" title="G" value="G">
                <input type="checkbox" id="answerh" ischeckbox="answer" lay-verify="checkbox" title="H" value="H">
            </div>
        </div>
    </div>
    <div id="type3" style="display: none;">
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">参考答案</label>
            <div class="layui-input-block">
                <textarea id="answertype3" placeholder="多个答案请用空格隔开" class="layui-textarea"></textarea>
            </div>
        </div>
    </div>
    <div id="type4" style="display: none;">
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">参考答案</label>
            <div class="layui-input-block">
                <textarea id="answertype4" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
    </div>
    <div id="type5" style="display: none;">
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">是否启用</label>
        <div class="layui-input-block">
            <input type="checkbox" name="status" checked="" lay-skin="switch" title="状态" lay-text="开启|关闭" value="1">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script src="__PUBLIC__/BeginnerAdmin/plugins/layui/layui.js"></script>
<script src="__PUBLIC__/AmazeUI/assets/js/jquery-1.8.0.min.js"></script>
<script src="__PUBLIC__/editor/ckeditor.js"></script>
<script>
    function settime() {
        // window.location.href = 'Admin_Topic_NewTopicUI.html?examinationid=<{$examinationid}>';
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }
    function optionPro() {
        $("#optionPro").toggle();
        $("#answerPro").toggle();
        $("#hide").toggle();
        $("#show").toggle();

    }

    CKEDITOR.replace('body',
        {
            filebrowserImageUploadUrl: "<{:U('Topic/CKeditUpImage')}>",
            height: 200
        });
    CKEDITOR.replace('optiona',
        {
            filebrowserImageUploadUrl: "<{:U('Topic/CKeditUpImage')}>",
            height: 100
        });
    CKEDITOR.replace('optionb',
        {
            filebrowserImageUploadUrl: "<{:U('Topic/CKeditUpImage')}>",
            height: 100
        });
    CKEDITOR.replace('optionc',
        {
            filebrowserImageUploadUrl: "<{:U('Topic/CKeditUpImage')}>",
            height: 100
        });
    CKEDITOR.replace('optiond',
        {
            filebrowserImageUploadUrl: "<{:U('Topic/CKeditUpImage')}>",
            height: 100
        });
    CKEDITOR.replace('optione',
        {
            filebrowserImageUploadUrl: "<{:U('Topic/CKeditUpImage')}>",
            height: 100
        });
    CKEDITOR.replace('optionf',
        {
            filebrowserImageUploadUrl: "<{:U('Topic/CKeditUpImage')}>",
            height: 100
        });
    CKEDITOR.replace('optiong',
        {
            filebrowserImageUploadUrl: "<{:U('Topic/CKeditUpImage')}>",
            height: 100
            
        });
    CKEDITOR.replace('optionh',
        {
            filebrowserImageUploadUrl: "<{:U('Topic/CKeditUpImage')}>",
            height: 100
            
        });
    layui.use(['form', 'laydate', 'layedit'], function () {
        var form = layui.form,
            layer = layui.layer,
            laydate = layui.laydate,
            layedit = layui.layedit;

        layedit.set({
            uploadImage: {
                url: "<{:U('Topic/UpImage')}>" //接口url
                , type: 'post' //默认post
            }
        });

        //自定义验证规则
        form.verify({

            body: function (value) {
                if (value.length < 4) {
                    return '题目至少四个字符呀！';
                }
            },
            answerb: function (value) {
                if (value.length < 1 && ($("#type").val() == 1 || $("#type").val() == 2)) {
                    return '至少得1个字符啊';
                }
            },
            answerc: function (value) {
                if (value.length < 1 && ($("#type").val() == 1 || $("#type").val() == 2)) {
                    return '至少得1个字符啊';
                }
            },
            answerd: function (value) {
                if (value.length < 1 && ($("#type").val() == 1 || $("#type").val() == 2)) {
                    return '至少得1个字符啊';
                }
            }
        });

        //监听提交
        form.on('submit(demo1)', function (data) {
            data.field.body = CKEDITOR.instances.body.getData();
            if(data.field.type == 1 || data.field.type == 2){
                var option = {
                    "A": CKEDITOR.instances.optiona.getData(),
                    "B": CKEDITOR.instances.optionb.getData(),
                    "C": CKEDITOR.instances.optionc.getData(),
                    "D": CKEDITOR.instances.optiond.getData(),
                    "E": CKEDITOR.instances.optione.getData(),
                    "F": CKEDITOR.instances.optionf.getData(),
                    "G": CKEDITOR.instances.optiong.getData(),
                    "H": CKEDITOR.instances.optionh.getData()
                };
                data.field.option = option;
                var chk_value =[];
                $("input[ischeckbox='answer']:checked").each(function(){
                    chk_value.push($(this).val());
                });
                data.field.answer = chk_value;
                console.log(chk_value);
            }else if(data.field.type == 3){
                //填空
                data.field.answer = $("#answertype3").val();
            }else if(data.field.type == 4){
                //简答
                data.field.answer = $("#answertype4").val();
            }else if(data.field.type == 5){
                //内置题型
            }else if(data.field.type == 6){
                //内置到
            }

            $.post('Admin_Topic_NewTopic.html', data.field, function (date) {
                if (date.code == 200) {
                    layer.msg('添加成功');
                    setTimeout('settime()', 1500);//延时执行，让人看得更清楚
                } else {
                    layer.alert(date.msg);
                }

            }, 'json');
            /*layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            });*/
            return false;
        });

        form.on('select(selectType)', function (data) {
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
            $("#type1").hide();
            $("#type3").hide();
            $("#type4").hide();
            $("#type5").hide();
            $("#title").hide();
            $("#neizhi").attr('disabled',false);
            if (data.value == 1 || data.value == 2) {
                //单选、多选
                $("#type1").show();
            }else if(data.value == 3){
                //填空题
                $("#type3").show();
            }else if(data.value == 4){
                //简答题
                $("#type4").show();
            }else if(data.value == 5){
                //内置小题到该题目
                $("#type5").show();
                $("#title").show();
                $("#neizhi").attr('disabled',true);
            }
            form.render('checkbox');
        });

        form.on('checkbox(neizhi)', function(data){
            console.log(data.elem); //得到checkbox原始DOM对象
            console.log(data.elem.checked); //是否被选中，true或者false
            console.log(data.value); //复选框value值，也可以通过data.elem.value得到
            console.log(data.othis); //得到美化后的DOM对象
            if (data.elem.checked){
                $("#type6").show();
                $("#type>option[value='5']").attr('disabled',true);
                form.render('select');
            }else{
                $("#type6").hide();
                $("#type>option[value='5']").attr('disabled',false);
                form.render('select');
            }
        });
    });
</script>
</body>
</html>